<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="Prince" />

	<title>nav2</title>
 
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
li{
    list-style:none;
}
a{
    text-decoration:none;
}
#main{
    width:800px;
    margin:auto;
    border: 1px dotted #aaa;
    padding: 10px;
}

.ud_nav_green1{
    width:600px;
    height:30px;
    background-color: #2DA24A;
}
.ud_nav_green1 li{
    float:left;
    width:60px;
    height:30px;
    font-size: 20px;
    text-align:center;
    position:relative;
}
.ud_nav_green1 li:hover{
    font-weight:bold;
}
.ud_nav_green1 li:hover ul{
    display:block;
}
.ud_nav_green1 li a{
 line-height:30px;
 color:#fff;   
}
.ud_nav_green1 .active{
    font-weight: bold;
}
.ud_nav_green1 ul ul{
    position:absolute;
    display:none;
     border: 1px solid #ccc;
    border-bottom:0px;
   
    
}
.ud_nav_green1 ul li li{
    width:60px;
    height:30px;
    line-height:30px;
    text-align:center;
     border-bottom: 1px solid #ccc;
    
}
.ud_nav_green1 ul li li:hover{
    background-color: #2DA24A;
}

.ud_btn_green{
    width:50px;
    height:30px;
    line-height:30px;
    background-color: #41bb19;
    color:#fff;
    display:block;
    text-align:center;
    cursor: pointer;
}
.ud_btn_green:hover{
    background-color: #379f15;
   
}

</style>
</head>


<body>
<div id="main">
<div class="ud_nav_green1">
<ul>
<li><a href="#">aaa</a></li>
<li class="active"><a href="#">bbb</a>
    <ul><li>b</li><li>bbb</li></ul>
</li>
</ul>

</div>

<a class="ud_btn_green">aaa</a>
</div>

</body>
</html>